<template>
  UI库的二次封装，无防抖
  <el-row>
    <el-col :span="2">v-model：</el-col>
    <el-col :span="15">
      <nf-text v-model="refName" placeholder=""></nf-text>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="2">reactive：</el-col>
    <el-col :span="15">
      <nf-text :model="retUser" colName="name" placeholder=""></nf-text>
    </el-col>
  </el-row>
  UI库的二次封装，有防抖
  <el-row>
    <el-col :span="2">v-model：</el-col>
    <el-col :span="15">
      <nf-text2 v-model="refName" placeholder=""></nf-text2>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="2">reactive：</el-col>
    <el-col :span="15">
      <nf-text2 :model="retUser" colName="name" placeholder=""></nf-text2>
    </el-col>
  </el-row>
  多选的防抖
  <el-row>
    <el-col :span="2">多选：</el-col>
    <el-col :span="15">
      <nf-checks :model="retUser" colName="like"></nf-checks>
    </el-col>
  </el-row>
  直接使用的防抖
  <el-row>
    <el-col :span="2">reactive：</el-col>
    <el-col :span="15">
      <el-input v-model="address" @keydown="mykeydown" placeholder=""></el-input>
    </el-col>
  </el-row>
  <el-button @click="set1">设置 ref 的 name</el-button> &nbsp; &nbsp; 
  <el-button @click="set2">设置 reactive 的 name</el-button><br>
  <hr>
  ref 的 name：{{refName}}<br>
  reactive 的 name：{{retUser.name}}<br>
  reactive 的 like：{{retUser.like}}<br>
  reactive 的 address{{retUser.address}}<br>

</template>

<script>
  import {ref, reactive, nextTick} from 'vue'
  import { ElRow, ElCol, ElButton, ElInput } from 'element-plus'
  import NfText from './UI/text.vue'
  import NfText2 from './UI/text2.vue'
  import NfChecks from './UI/checks.vue'
  import debounceRef from './js/debounceRef.js'

</script>

<script setup>

  const refName = ref('基础类型的响应性')

  const retUser = reactive({
    name: '对象的响应性',
    address: '',
    age: 18,
    like: []
  })

  const addressProps = {
    model: retUser,
    colName: 'address'
  }

  const events = {
    run: () => {},
    clear: () => {}
  }

  const address = debounceRef(addressProps, events)
  // 按键，用于汉字的连续输入
  const mykeydown = (e) => {
    // console.log('按键信息：', e)
    events.clear()
  }
  const set1 = () => {
    refName.value = new Date().valueOf()
  }

  const set2 = () => {
    retUser.name = new Date().valueOf()
  }

</script>